<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="preview/css/reset.css"/>
    <link rel="stylesheet" href="preview/css/todayBorrow.css"/>
    <title>本年借出还入数</title>
</head>
<body>

<div class="yh_year clearfix">
    <div class="bot_title DoubleTitle xycenterbox">
        <img src="preview/img/no5.png" alt="" class=""/>
        <p class="p1">今日借出还入数</p>
    </div>
    <div class="yearTitle clearfix">
        <div class="yearOut fl">本年借出<span> （总数: <b>68969</b>）</span></div>
        <div class="yearIn fr" style="text-align: right;">本年还入 <span>（总数: <b>78969</b>）</span></div>
    </div>
    <div class="box1 area_clickRank fl"></div>
    <div class="areaName fl">
        <!--<div class="area">余杭区图书馆24小时</div>-->
        <!--<div class="area">余杭区政府24小时</div>-->
        <!--<div class="area">金都夏宫24小时</div>-->
        <!--<div class="area">临平街道24小时</div>-->
        <!--<div class="area">乔司街道分馆</div>-->
        <!--<div class="area">南苑街道分馆</div>-->
        <!--<div class="area">临平街道分馆</div>-->
        <!--<div class="area">中泰街道分馆</div>-->
        <!--<div class="area">良渚街道分馆</div>-->
        <!--<div class="area">径山镇分馆</div>-->
    </div>
    <div class="box2 area_clickRank fl"></div>
</div>
</body>
<script src="preview/js/jquery-3.2.1.min.js"></script>
<script src="preview/js/countUp.js"></script>

<script>
    var chart_timer=null,waitCountNum=0;
    function randomData() {
        return Math.round(Math.random()*100000);
    }
    function getRem(prem, pwidth) {
        var html = document.getElementsByTagName("html")[0];
        var oWidth = $(window).width()||document.body.clientWidth || document.documentElement.clientWidth;
        html.style.fontSize = oWidth / pwidth * prem + "px";
        return oWidth / pwidth * prem;
    }
    window.onresize = function(){
        getRem(100,1020);
    };
    window.onload = function(){
        getRem(100,1020);
        /////自己模拟的数据 total 是每个数据的基数 可能每个分馆数据差别大，所以设置了每个分馆计算柱状条比例的基数
        var showNum=23;
        var clickArr=[
            {"name":"平桥乡","total":8000000,"borrowOut":6516000,"borrowIn":6616000},
            {"name":"分路口镇","total":100000,"borrowOut":45632,"borrowIn":36598},
            {"name":"苏埠镇","total":100000,"borrowOut":69874,"borrowIn":86563},
            {"name":"南楼村农家书屋","total":100000,"borrowOut":56985,"borrowIn":35626},
            {"name":"单王乡","total":100000,"borrowOut":87569,"borrowIn":63254},
            {"name":"韩摆渡镇","total":100000,"borrowOut":85694,"borrowIn":74586},
            {"name":"独山镇","total":100000,"borrowOut":45126,"borrowIn":54236},
            {"name":"江家店镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"青山乡","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"狮子岗乡","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"顺河镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"罗集乡","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"石板冲乡","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"固镇镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"石婆店镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"新安镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"西市街道","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"城南镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"西河口乡","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"丁集镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"鼓楼街道","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"徐集镇","total":100000,"borrowOut":35685,"borrowIn":45632},
            {"name":"小华山街道","total":100000,"borrowOut":35685,"borrowIn":45632},
        ];
        var startIndex=-showNum,endIndex,index=-1;
        var showNumber=showNum;
        var totalPage = clickArr.length % showNumber == 0 ? clickArr.length / showNumber : parseInt(clickArr.length / showNumber) + 1;   //总共几页
        /////渲染借出数据
        function move(){
            $('.box1').html('');
            $('.box2').html('');
            $('.areaName').html('');
            index++;
            if(index>=totalPage){
                index=0;
            }
            startIndex=index*showNumber;
            endIndex=(index+1)*showNumber;
            endIndex=endIndex>=clickArr.length?clickArr.length:endIndex;
            new CountUp( $('.yearOut b'), 0,6896985, 0, 2).start();
            new CountUp( $('.yearIn b'), 0,6896985, 0, 2).start();
            var str1='',str2='',area='';
            for (var i = startIndex; i < endIndex; i++) {
                area='<div class="area">'+clickArr[i].name+'</div>';
                str1='<div class="barBox xycenterbox">'+
                        '<span class="area_clickNum"></span>'+
                        '<div class="barWrap"><div class="bar"></div></div>'+
                        '</div>';
                str2='<div class="barBox xycenterbox">'+
                        '<div class="barWrap"><div class="bar"></div></div>'+
                        '<span class="area_clickNum"></span>'+
                        '</div>';
                $('.box1').append(str1);
                $('.box2').append(str2);
                $('.areaName').append(area);
                $('.box2 .area_clickNum:eq('+(i-startIndex)+')').html(clickArr[i].borrowIn);
                new CountUp($('.box2 .area_clickNum:eq('+(i-startIndex)+')'), 0, clickArr[i].borrowIn, 0, 2).start();
                $('.box2 .bar:eq('+(i-startIndex)+')').width(0).animate({
                    width : clickArr[i].borrowIn/clickArr[i].total*100+"%"
                },2000,"swing");

                $('.box1 .area_clickNum:eq('+(i-startIndex)+')').html(clickArr[i].borrowOut);
                new CountUp($('.box1 .area_clickNum:eq('+(i-startIndex)+')'), 0, clickArr[i].borrowOut, 0, 2).start();
                $('.box1 .bar:eq('+(i-startIndex)+')').width(0).animate({
                    width : clickArr[i].borrowOut/clickArr[i].total*100+"%"
                },2000,"swing");
            }
        }
        move();
        waitTime();
        function waitTime(){
            if(!!window.chart_timer)	cancelAnimationFrame(window.chart_timer);
            if(waitCountNum >= 900){///15秒重复一次动效
                waitCountNum = 0;
                move();
            }
            waitCountNum++;
            window.chart_timer = requestAnimationFrame(waitTime);
        }
    }


</script>
</html>
